<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-beta.46" />
    <meta name="theme" content="VuePress Theme Hope" />
    <meta property="og:url" content="https://hjdbenny.github.io/blog/blog/web/markdown.html"><meta property="og:site_name" content="笔记整理"><meta property="og:title" content="Markdown 示例"><meta property="og:type" content="article"><meta property="og:locale" content="zh-CN"><meta property="article:tag" content="web"><meta property="article:tag" content="markdown"><meta property="article:published_time" content="2022-04-21T00:00:00.000Z"><link rel="stylesheet" href="//at.alicdn.com/t/font_2410206_mfj6e1vbwo.css"><title>Markdown 示例 | 笔记整理</title><meta name="description" content="前端笔记整理">
    <style>
      :root {
        --bg-color: #fff;
      }

      html[data-theme="dark"] {
        --bg-color: #1d2025;
      }

      html,
      body {
        background-color: var(--bg-color);
      }
    </style>
    <script>
      const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
      const systemDarkMode =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;

      if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
        document.querySelector("html").setAttribute("data-theme", "dark");
      }
    </script>
    <link rel="stylesheet" href="/blog/assets/style.08f1251e.css">
    <link rel="modulepreload" href="/blog/assets/app.0bf46e8a.js"><link rel="modulepreload" href="/blog/assets/markdown.html.de701a8b.js"><link rel="modulepreload" href="/blog/assets/plugin-vue_export-helper.21dcd24c.js"><link rel="modulepreload" href="/blog/assets/markdown.html.d15d9d1f.js"><link rel="prefetch" href="/blog/assets/index.html.abcfc968.js"><link rel="prefetch" href="/blog/assets/index.html.a4ed4caf.js"><link rel="prefetch" href="/blog/assets/vue3.html.c9788e3f.js"><link rel="prefetch" href="/blog/assets/404.html.68e71acc.js"><link rel="prefetch" href="/blog/assets/index.html.4fb08766.js"><link rel="prefetch" href="/blog/assets/index.html.ba497813.js"><link rel="prefetch" href="/blog/assets/index.html.d01f22d8.js"><link rel="prefetch" href="/blog/assets/index.html.9d8d3ef9.js"><link rel="prefetch" href="/blog/assets/index.html.3260d211.js"><link rel="prefetch" href="/blog/assets/index.html.278769e5.js"><link rel="prefetch" href="/blog/assets/index.html.de89d36c.js"><link rel="prefetch" href="/blog/assets/index.html.21a45cae.js"><link rel="prefetch" href="/blog/assets/index.html.06360972.js"><link rel="prefetch" href="/blog/assets/index.html.3423d6b4.js"><link rel="prefetch" href="/blog/assets/index.html.a27f3d7b.js"><link rel="prefetch" href="/blog/assets/index.html.3648fc66.js"><link rel="prefetch" href="/blog/assets/index.html.9208cda6.js"><link rel="prefetch" href="/blog/assets/index.html.21d017e9.js"><link rel="prefetch" href="/blog/assets/index.html.8a0d6ae4.js"><link rel="prefetch" href="/blog/assets/vue3.html.e931cac2.js"><link rel="prefetch" href="/blog/assets/404.html.37bf58f4.js"><link rel="prefetch" href="/blog/assets/index.html.0b69e196.js"><link rel="prefetch" href="/blog/assets/index.html.9008806c.js"><link rel="prefetch" href="/blog/assets/index.html.13ac8be4.js"><link rel="prefetch" href="/blog/assets/index.html.2e8282bb.js"><link rel="prefetch" href="/blog/assets/index.html.e8d380f2.js"><link rel="prefetch" href="/blog/assets/index.html.7bf8a740.js"><link rel="prefetch" href="/blog/assets/index.html.ad099e41.js"><link rel="prefetch" href="/blog/assets/index.html.501f220a.js"><link rel="prefetch" href="/blog/assets/index.html.df3b44cb.js"><link rel="prefetch" href="/blog/assets/index.html.e61f5b1a.js"><link rel="prefetch" href="/blog/assets/index.html.c63772c7.js"><link rel="prefetch" href="/blog/assets/index.html.2455965c.js"><link rel="prefetch" href="/blog/assets/index.html.413130ef.js"><link rel="prefetch" href="/blog/assets/404.0cd0c936.js"><link rel="prefetch" href="/blog/assets/Layout.4d2723b5.js"><link rel="prefetch" href="/blog/assets/Slide.62a6ff08.js"><link rel="prefetch" href="/blog/assets/Blog.1b788198.js"><link rel="prefetch" href="/blog/assets/auto.esm.36809f22.js"><link rel="prefetch" href="/blog/assets/index.5cb56ef7.js"><link rel="prefetch" href="/blog/assets/index.1842ee54.js"><link rel="prefetch" href="/blog/assets/mermaid.esm.min.95aabeb7.js"><link rel="prefetch" href="/blog/assets/highlight.esm.d982e650.js"><link rel="prefetch" href="/blog/assets/markdown.esm.832a189d.js"><link rel="prefetch" href="/blog/assets/math.esm.a3f84b6f.js"><link rel="prefetch" href="/blog/assets/notes.esm.3c361cb7.js"><link rel="prefetch" href="/blog/assets/reveal.esm.b96f05d8.js"><link rel="prefetch" href="/blog/assets/search.esm.80da4a02.js"><link rel="prefetch" href="/blog/assets/zoom.esm.8514a202.js"><link rel="prefetch" href="/blog/assets/photoswipe.esm.92018b73.js">
  </head>
  <body>
    <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="skip-link sr-only">Skip to content</a><!--]--><div class="theme-container has-toc"><!--[--><!--[--><header class="navbar"><div class="navbar-left"><button class="toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!----><a href="/blog/" class="brand"><img class="logo" src="/blog/logo.png" alt="笔记整理"><!----><span class="site-name hide-in-pad">笔记整理</span></a><!----></div><div class="navbar-center"><!----><nav class="nav-links"><div class="nav-item hide-in-mobile"><a href="/blog/" class="nav-link" aria-label="首页"><span class="icon iconfont icon-home" style=""></span>首页<!----></a></div><div class="nav-item hide-in-mobile"><a href="/blog/web/" class="nav-link active" aria-label="前端"><span class="icon iconfont icon-info" style=""></span>前端<!----></a></div></nav><!----></div><div class="navbar-right"><!----><div class="nav-item"><!----></div><div class="nav-item"><a class="repo-link" href="https://github.com/hjdbenny/blog" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="github icon" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="nav-item hide-in-mobile"><button id="appearance-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="light icon" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!----><!----><button class="toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span class="button-container"><span class="button-top"></span><span class="button-middle"></span><span class="button-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow left"></span></div><aside class="sidebar"><!--[--><!----><!--]--><ul class="sidebar-links"><li><!--[--><a href="/blog/web/" class="nav-link sidebar-link sidebar-page" aria-label="前端笔记"><!---->前端笔记<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a aria-current="page" href="/blog/web/markdown.html" class="router-link-active router-link-exact-active nav-link active sidebar-link sidebar-page active" aria-label="Markdown 示例"><!---->Markdown 示例<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#二级标题" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="二级标题"><!---->二级标题<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#三级标题" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="三级标题"><!---->三级标题<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#text" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="Text"><!---->Text<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#段落" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="段落"><!---->段落<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#换行" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="换行"><!---->换行<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#引用" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="引用"><!---->引用<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#列表" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="列表"><!---->列表<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#无序列表" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="无序列表"><!---->无序列表<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#有序列表" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="有序列表"><!---->有序列表<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#图片" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="图片"><!---->图片<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#emoji" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="Emoji"><!---->Emoji<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#经典方式" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="经典方式"><!---->经典方式<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#简写" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="简写"><!---->简写<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#表格" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="表格"><!---->表格<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#代码" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="代码"><!---->代码<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="容器"><!---->容器<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#信息容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="信息容器"><!---->信息容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#注释容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="注释容器"><!---->注释容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#提示容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="提示容器"><!---->提示容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#警告容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="警告容器"><!---->警告容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#危险容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="危险容器"><!---->危险容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#详情容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="详情容器"><!---->详情容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的信息容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义标题的信息容器"><!---->自定义标题的信息容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的注释容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义标题的注释容器"><!---->自定义标题的注释容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的提示容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义标题的提示容器"><!---->自定义标题的提示容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的警告容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义标题的警告容器"><!---->自定义标题的警告容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的危险容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义标题的危险容器"><!---->自定义标题的危险容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的详情容器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义标题的详情容器"><!---->自定义标题的详情容器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义信息" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义信息"><!---->自定义信息<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义注释" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义注释"><!---->自定义注释<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义提示" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义提示"><!---->自定义提示<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义警告" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义警告"><!---->自定义警告<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#自定义危险" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="自定义危险"><!---->自定义危险<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#badge" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="Badge"><!---->Badge<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#对齐" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="对齐"><!---->对齐<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#上下角标" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="上下角标"><!---->上下角标<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#脚注" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="脚注"><!---->脚注<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#标记" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="标记"><!---->标记<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#任务列表" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="任务列表"><!---->任务列表<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/markdown.html#更多" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="更多"><!---->更多<!----></a><ul class="sidebar-sub-headers"></ul></li></ul><!--]--></li><li><!--[--><a href="/blog/web/vue3.html" class="nav-link sidebar-link sidebar-page" aria-label="vite+vue3+ts+pinia+vueuse"><!---->vite+vue3+ts+pinia+vueuse<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li></ul><!--[--><!----><!--]--></aside><!--[--><main class="page" id="main-content"><!--[--><!----><nav class="breadcrumb disable"></nav><div class="page-title"><h1><!---->Markdown 示例</h1><div class="page-info"><span class="author-info" aria-label="作者🖊" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon author-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="author icon"><path d="M649.6 633.6c86.4-48 147.2-144 147.2-249.6 0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 9.6 0 19.2 6.4 25.6 3.2 9.6 12.8 12.8 22.4 12.8h704c9.6 0 19.2-3.2 25.6-12.8 6.4-6.4 9.6-16 6.4-25.6-25.6-134.4-121.6-240-243.2-288z"></path></svg><span><a class="author-item" href="https://hjdbenny.github.io/blog/" target="_blank" rel="noopener noreferrer">潇湘阁听雨</a></span><span property="author" content="潇湘阁听雨"></span></span><!----><span class="date-info" aria-label="写作日期📅" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon calendar-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="calendar icon"><path d="M716.4 110.137c0-18.753-14.72-33.473-33.472-33.473-18.753 0-33.473 14.72-33.473 33.473v33.473h66.993v-33.473zm-334.87 0c0-18.753-14.72-33.473-33.473-33.473s-33.52 14.72-33.52 33.473v33.473h66.993v-33.473zm468.81 33.52H716.4v100.465c0 18.753-14.72 33.473-33.472 33.473a33.145 33.145 0 01-33.473-33.473V143.657H381.53v100.465c0 18.753-14.72 33.473-33.473 33.473a33.145 33.145 0 01-33.473-33.473V143.657H180.6A134.314 134.314 0 0046.66 277.595v535.756A134.314 134.314 0 00180.6 947.289h669.74a134.36 134.36 0 00133.94-133.938V277.595a134.314 134.314 0 00-133.94-133.938zm33.473 267.877H147.126a33.145 33.145 0 01-33.473-33.473c0-18.752 14.72-33.473 33.473-33.473h736.687c18.752 0 33.472 14.72 33.472 33.473a33.145 33.145 0 01-33.472 33.473z"></path></svg><span>2022年4月21日</span><meta property="datePublished" content="2022-04-21T00:00:00.000Z"></span><span class="category-info" aria-label="分类🌈" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon category-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="category icon"><path d="M148.41 106.992h282.176c22.263 0 40.31 18.048 40.31 40.31V429.48c0 22.263-18.047 40.31-40.31 40.31H148.41c-22.263 0-40.311-18.047-40.311-40.31V147.302c0-22.263 18.048-40.31 40.311-40.31zM147.556 553.478H429.73c22.263 0 40.311 18.048 40.311 40.31v282.176c0 22.263-18.048 40.312-40.31 40.312H147.555c-22.263 0-40.311-18.049-40.311-40.312V593.79c0-22.263 18.048-40.311 40.31-40.311zM593.927 106.992h282.176c22.263 0 40.31 18.048 40.31 40.31V429.48c0 22.263-18.047 40.31-40.31 40.31H593.927c-22.263 0-40.311-18.047-40.311-40.31V147.302c0-22.263 18.048-40.31 40.31-40.31zM730.22 920.502H623.926c-40.925 0-74.22-33.388-74.22-74.425V623.992c0-41.038 33.387-74.424 74.425-74.424h222.085c41.038 0 74.424 33.226 74.424 74.067v114.233c0 10.244-8.304 18.548-18.547 18.548s-18.548-8.304-18.548-18.548V623.635c0-20.388-16.746-36.974-37.33-36.974H624.13c-20.585 0-37.331 16.747-37.331 37.33v222.086c0 20.585 16.654 37.331 37.126 37.331H730.22c10.243 0 18.547 8.304 18.547 18.547 0 10.244-8.304 18.547-18.547 18.547z"></path></svg><ul class="categories-wrapper"><li class="category category1 clickable" role="navigation">web</li><li class="category category8 clickable" role="navigation">markdown</li><meta property="articleSection" content="web,markdown"></ul></span><span aria-label="标签🏷" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon tag-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="tag icon"><path d="M939.902 458.563L910.17 144.567c-1.507-16.272-14.465-29.13-30.737-30.737L565.438 84.098h-.402c-3.215 0-5.726 1.005-7.634 2.913l-470.39 470.39a10.004 10.004 0 000 14.164l365.423 365.424c1.909 1.908 4.42 2.913 7.132 2.913s5.223-1.005 7.132-2.913l470.39-470.39c2.01-2.11 3.014-5.023 2.813-8.036zm-240.067-72.121c-35.458 0-64.286-28.828-64.286-64.286s28.828-64.285 64.286-64.285 64.286 28.828 64.286 64.285-28.829 64.286-64.286 64.286z"></path></svg><ul class="tags-wrapper"><li class="tag tag1 clickable" role="navigation">web</li><li class="tag tag8 clickable" role="navigation">markdown</li></ul><meta property="keywords" content="web,markdown"></span><span class="reading-time-info" aria-label="阅读时间⌛" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon timer-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="timer icon"><path d="M799.387 122.15c4.402-2.978 7.38-7.897 7.38-13.463v-1.165c0-8.933-7.38-16.312-16.312-16.312H256.33c-8.933 0-16.311 7.38-16.311 16.312v1.165c0 5.825 2.977 10.874 7.637 13.592 4.143 194.44 97.22 354.963 220.201 392.763-122.204 37.542-214.893 196.511-220.2 389.397-4.661 5.049-7.638 11.651-7.638 19.03v5.825h566.49v-5.825c0-7.379-2.849-13.981-7.509-18.9-5.049-193.016-97.867-351.985-220.2-389.527 123.24-37.67 216.446-198.453 220.588-392.892zM531.16 450.445v352.632c117.674 1.553 211.787 40.778 211.787 88.676H304.097c0-48.286 95.149-87.382 213.728-88.676V450.445c-93.077-3.107-167.901-81.297-167.901-177.093 0-8.803 6.99-15.793 15.793-15.793 8.803 0 15.794 6.99 15.794 15.793 0 80.261 63.69 145.635 142.01 145.635s142.011-65.374 142.011-145.635c0-8.803 6.99-15.793 15.794-15.793s15.793 6.99 15.793 15.793c0 95.019-73.789 172.82-165.96 177.093z"></path></svg><span>大约 4 分钟</span><meta property="timeRequired" content="PT4M"></span></div><hr></div><div class="toc-place-holder"><aside id="toc"><div class="toc-header">此页内容</div><div class="toc-wrapper"><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#二级标题" class="router-link-active router-link-exact-active toc-link level2">二级标题</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#三级标题" class="router-link-active router-link-exact-active toc-link level3">三级标题</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#text" class="router-link-active router-link-exact-active toc-link level2">Text</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#段落" class="router-link-active router-link-exact-active toc-link level2">段落</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#换行" class="router-link-active router-link-exact-active toc-link level2">换行</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#引用" class="router-link-active router-link-exact-active toc-link level2">引用</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#列表" class="router-link-active router-link-exact-active toc-link level2">列表</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#无序列表" class="router-link-active router-link-exact-active toc-link level3">无序列表</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#有序列表" class="router-link-active router-link-exact-active toc-link level3">有序列表</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#图片" class="router-link-active router-link-exact-active toc-link level2">图片</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#emoji" class="router-link-active router-link-exact-active toc-link level2">Emoji</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#经典方式" class="router-link-active router-link-exact-active toc-link level3">经典方式</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#简写" class="router-link-active router-link-exact-active toc-link level3">简写</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#表格" class="router-link-active router-link-exact-active toc-link level2">表格</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#代码" class="router-link-active router-link-exact-active toc-link level2">代码</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#容器" class="router-link-active router-link-exact-active toc-link level2">容器</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#信息容器" class="router-link-active router-link-exact-active toc-link level3">信息容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#注释容器" class="router-link-active router-link-exact-active toc-link level3">注释容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#提示容器" class="router-link-active router-link-exact-active toc-link level3">提示容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#警告容器" class="router-link-active router-link-exact-active toc-link level3">警告容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#危险容器" class="router-link-active router-link-exact-active toc-link level3">危险容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#详情容器" class="router-link-active router-link-exact-active toc-link level3">详情容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的信息容器" class="router-link-active router-link-exact-active toc-link level3">自定义标题的信息容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的注释容器" class="router-link-active router-link-exact-active toc-link level3">自定义标题的注释容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的提示容器" class="router-link-active router-link-exact-active toc-link level3">自定义标题的提示容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的警告容器" class="router-link-active router-link-exact-active toc-link level3">自定义标题的警告容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的危险容器" class="router-link-active router-link-exact-active toc-link level3">自定义标题的危险容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义标题的详情容器" class="router-link-active router-link-exact-active toc-link level3">自定义标题的详情容器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义信息" class="router-link-active router-link-exact-active toc-link level3">自定义信息</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义注释" class="router-link-active router-link-exact-active toc-link level3">自定义注释</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义提示" class="router-link-active router-link-exact-active toc-link level3">自定义提示</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义警告" class="router-link-active router-link-exact-active toc-link level3">自定义警告</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#自定义危险" class="router-link-active router-link-exact-active toc-link level3">自定义危险</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#badge" class="router-link-active router-link-exact-active toc-link level2">Badge</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#对齐" class="router-link-active router-link-exact-active toc-link level2">对齐</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#上下角标" class="router-link-active router-link-exact-active toc-link level2">上下角标</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#脚注" class="router-link-active router-link-exact-active toc-link level2">脚注</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#标记" class="router-link-active router-link-exact-active toc-link level2">标记</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#任务列表" class="router-link-active router-link-exact-active toc-link level2">任务列表</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/markdown.html#更多" class="router-link-active router-link-exact-active toc-link level2">更多</a></li><!----><!--]--></ul></div></aside></div><!----><div class="theme-hope-content"><h1 id="一级标题" tabindex="-1"><a class="header-anchor" href="#一级标题" aria-hidden="true">#</a> 一级标题</h1><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code># 一级标题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="二级标题" tabindex="-1"><a class="header-anchor" href="#二级标题" aria-hidden="true">#</a> 二级标题</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>## 二级标题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="三级标题" tabindex="-1"><a class="header-anchor" href="#三级标题" aria-hidden="true">#</a> 三级标题</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>### 三级标题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="四级标题" tabindex="-1"><a class="header-anchor" href="#四级标题" aria-hidden="true">#</a> 四级标题</h4><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>#### 四级标题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="五级标题" tabindex="-1"><a class="header-anchor" href="#五级标题" aria-hidden="true">#</a> 五级标题</h5><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>##### 五级标题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h6 id="六级标题" tabindex="-1"><a class="header-anchor" href="#六级标题" aria-hidden="true">#</a> 六级标题</h6><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>###### 六级标题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="text" tabindex="-1"><a class="header-anchor" href="#text" aria-hidden="true">#</a> Text</h2><p>这句话里拥有<strong>加粗</strong>、<em>倾斜</em>和<s>删除</s></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>这句话里拥有**加粗**、*倾斜*和~~删除~~
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="段落" tabindex="-1"><a class="header-anchor" href="#段落" aria-hidden="true">#</a> 段落</h2><p>这是一个段落</p><p>这是另一个段落。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>这是一个段落

这是另一个段落。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="换行" tabindex="-1"><a class="header-anchor" href="#换行" aria-hidden="true">#</a> 换行</h2><p>这是一句话不过我要在这里<br> 换行</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>这是一句话不过我要在这里
换行
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="引用" tabindex="-1"><a class="header-anchor" href="#引用" aria-hidden="true">#</a> 引用</h2><blockquote><p>引用也可以连用</p><blockquote><p>可以添加额外的大于号制造更深的引用</p></blockquote></blockquote><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&gt; 引用也可以连用
&gt;
&gt; &gt; 可以添加额外的大于号制造更深的引用
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="列表" tabindex="-1"><a class="header-anchor" href="#列表" aria-hidden="true">#</a> 列表</h2><h3 id="无序列表" tabindex="-1"><a class="header-anchor" href="#无序列表" aria-hidden="true">#</a> 无序列表</h3><ul><li><p>无序列表</p><ul><li><p>列表中的列表项</p><ul><li>更多的列表项</li><li>更多的列表项</li><li>更多的列表项</li></ul></li><li><p>列表中的长列表项，这个列表项很长。</p><p>而且由很多个段落构成。</p><p>甚至最后一个段落还包含了<a href="#%E9%93%BE%E6%8E%A5">链接</a>。</p></li></ul></li><li><p>无序列表项</p></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- 无序列表

  - 列表中的列表项
    - 更多的列表项
    - 更多的列表项
    - 更多的列表项
  - 列表中的长列表项，这个列表项很长。

    而且由很多个段落构成。

    甚至最后一个段落还包含了[链接](#链接)。

- 无序列表项
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="有序列表" tabindex="-1"><a class="header-anchor" href="#有序列表" aria-hidden="true">#</a> 有序列表</h3><ol><li>有序列表第一项</li><li>有序列表第二项<br> 第二项的需要换行<br> 再次换行</li><li>有序列表第三项</li></ol><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>1. 有序列表第一项
2. 有序列表第二项
   第二项的需要换行
   再次换行
3. 有序列表第三项
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="图片" tabindex="-1"><a class="header-anchor" href="#图片" aria-hidden="true">#</a> 图片</h2><p><img src="/blog/logo.png" alt="Logo" loading="lazy"></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>![Logo](/logo.png)
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="emoji" tabindex="-1"><a class="header-anchor" href="#emoji" aria-hidden="true">#</a> Emoji</h2><h3 id="经典方式" tabindex="-1"><a class="header-anchor" href="#经典方式" aria-hidden="true">#</a> 经典方式</h3><p>😉 😢 😆 😋</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>:wink: :cry: :laughing: :yum:
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="简写" tabindex="-1"><a class="header-anchor" href="#简写" aria-hidden="true">#</a> 简写</h3><p>😎 😃 :* 😦 😃 😦 😉</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>8-) :) :\* :( :-) :-( ;)
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="表格" tabindex="-1"><a class="header-anchor" href="#表格" aria-hidden="true">#</a> 表格</h2><table><thead><tr><th style="text-align:center;">居中</th><th style="text-align:right;">右对齐</th><th style="text-align:left;">左对齐</th></tr></thead><tbody><tr><td style="text-align:center;">居中使用<code>:-:</code></td><td style="text-align:right;">右对齐使用<code>-:</code></td><td style="text-align:left;">左对齐使用<code>:-</code></td></tr><tr><td style="text-align:center;">b</td><td style="text-align:right;">aaaaaaaaa</td><td style="text-align:left;">aaaa</td></tr><tr><td style="text-align:center;">c</td><td style="text-align:right;">aaaa</td><td style="text-align:left;">a</td></tr></tbody></table><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>|     居中      |         右对齐 | 左对齐         |
| :-----------: | -------------: | :------------- |
| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
|       b       |      aaaaaaaaa | aaaa           |
|       c       |           aaaa | a              |
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="代码" tabindex="-1"><a class="header-anchor" href="#代码" aria-hidden="true">#</a> 代码</h2><p>行内代码效果: <code>code</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>行内代码效果: `code`
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>高亮格式:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">bar</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> bar<span class="token operator">++</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="容器" tabindex="-1"><a class="header-anchor" href="#容器" aria-hidden="true">#</a> 容器</h2><h3 id="信息容器" tabindex="-1"><a class="header-anchor" href="#信息容器" aria-hidden="true">#</a> 信息容器</h3><div class="custom-container info"><p class="custom-container-title">相关信息</p><p>信息容器。</p></div><h3 id="注释容器" tabindex="-1"><a class="header-anchor" href="#注释容器" aria-hidden="true">#</a> 注释容器</h3><div class="custom-container note"><p class="custom-container-title">注</p><p>注释容器。</p></div><h3 id="提示容器" tabindex="-1"><a class="header-anchor" href="#提示容器" aria-hidden="true">#</a> 提示容器</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>提示容器</p></div><h3 id="警告容器" tabindex="-1"><a class="header-anchor" href="#警告容器" aria-hidden="true">#</a> 警告容器</h3><div class="custom-container warning"><p class="custom-container-title">注意</p><p>警告容器</p></div><h3 id="危险容器" tabindex="-1"><a class="header-anchor" href="#危险容器" aria-hidden="true">#</a> 危险容器</h3><div class="custom-container danger"><p class="custom-container-title">警告</p><p>危险容器</p></div><h3 id="详情容器" tabindex="-1"><a class="header-anchor" href="#详情容器" aria-hidden="true">#</a> 详情容器</h3><details class="custom-container details"><summary>详情</summary><p>详情容器</p></details><h3 id="自定义标题的信息容器" tabindex="-1"><a class="header-anchor" href="#自定义标题的信息容器" aria-hidden="true">#</a> 自定义标题的信息容器</h3><div class="custom-container info"><p class="custom-container-title">自定义标题</p><p>一个有 <code>代码</code> 和 <a href="#markdown">链接</a> 的信息容器。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="自定义标题的注释容器" tabindex="-1"><a class="header-anchor" href="#自定义标题的注释容器" aria-hidden="true">#</a> 自定义标题的注释容器</h3><div class="custom-container note"><p class="custom-container-title">自定义标题</p><p>一个有 <code>代码</code> 和 <a href="#markdown">链接</a> 的注释容器。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="自定义标题的提示容器" tabindex="-1"><a class="header-anchor" href="#自定义标题的提示容器" aria-hidden="true">#</a> 自定义标题的提示容器</h3><div class="custom-container tip"><p class="custom-container-title">自定义标题</p><p>一个有 <code>代码</code> 和 <a href="#markdown">链接</a> 的提示容器。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="自定义标题的警告容器" tabindex="-1"><a class="header-anchor" href="#自定义标题的警告容器" aria-hidden="true">#</a> 自定义标题的警告容器</h3><div class="custom-container warning"><p class="custom-container-title">自定义标题</p><p>一个有 <code>代码</code> 和 <a href="#markdown">链接</a> 的警告容器。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="自定义标题的危险容器" tabindex="-1"><a class="header-anchor" href="#自定义标题的危险容器" aria-hidden="true">#</a> 自定义标题的危险容器</h3><div class="custom-container danger"><p class="custom-container-title">自定义标题</p><p>一个有 <code>代码</code> 和 <a href="#markdown">链接</a> 的危险容器。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="自定义标题的详情容器" tabindex="-1"><a class="header-anchor" href="#自定义标题的详情容器" aria-hidden="true">#</a> 自定义标题的详情容器</h3><details class="custom-container details"><summary>自定义标题</summary><p>一个有 <code>代码</code> 和 <a href="#markdown">链接</a> 的详情容器。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></details><h3 id="自定义信息" tabindex="-1"><a class="header-anchor" href="#自定义信息" aria-hidden="true">#</a> 自定义信息</h3><div class="custom-container info"><p class="custom-container-title">自定义信息</p></div><h3 id="自定义注释" tabindex="-1"><a class="header-anchor" href="#自定义注释" aria-hidden="true">#</a> 自定义注释</h3><div class="custom-container note"><p class="custom-container-title">自定义注释</p></div><h3 id="自定义提示" tabindex="-1"><a class="header-anchor" href="#自定义提示" aria-hidden="true">#</a> 自定义提示</h3><div class="custom-container tip"><p class="custom-container-title">自定义提示</p></div><h3 id="自定义警告" tabindex="-1"><a class="header-anchor" href="#自定义警告" aria-hidden="true">#</a> 自定义警告</h3><div class="custom-container warning"><p class="custom-container-title">自定义警告</p></div><h3 id="自定义危险" tabindex="-1"><a class="header-anchor" href="#自定义危险" aria-hidden="true">#</a> 自定义危险</h3><div class="custom-container danger"><p class="custom-container-title">自定义危险</p></div><h2 id="badge" tabindex="-1"><a class="header-anchor" href="#badge" aria-hidden="true">#</a> Badge</h2><span class="badge warning" style="vertical-align:top;">Building</span> <span class="badge info diy" style="vertical-align:top;background-color:grey;">MrHope</span><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&lt;Badge text=&quot;Building&quot; type=&quot;warning&quot;/&gt; &lt;Badge text=&quot;MrHope&quot; color=&quot;grey&quot; /&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="对齐" tabindex="-1"><a class="header-anchor" href="#对齐" aria-hidden="true">#</a> 对齐</h2><div class="custom-container danger"><p class="custom-container-title">W.I.P</p><p>vuepress-theme-hope v2 仍在制作中，API 可能会有</p><div style="text-align:center;"><p>重大的变动。</p></div><p>如果你在使用过程中遇到了 bug，可以</p><div style="text-align:right;"><p><a href="https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues" target="_blank" rel="noopener noreferrer">提一个 issue<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>。</p></div></div><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>:::: danger W.I.P
vuepress-theme-hope v2 仍在制作中，API 可能会有

::: center
重大的变动。
:::

如果你在使用过程中遇到了 bug，可以

::: right
[提一个 issue](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues)。
:::

::::
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="上下角标" tabindex="-1"><a class="header-anchor" href="#上下角标" aria-hidden="true">#</a> 上下角标</h2><ul><li>19<sup>th</sup></li><li>H<sub>2</sub>O</li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- 19^th^
- H~2~O
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="脚注" tabindex="-1"><a class="header-anchor" href="#脚注" aria-hidden="true">#</a> 脚注</h2><p>脚注 1 链接<sup class="footnote-ref"><a href="#footnote1">[1]</a><a class="footnote-anchor" id="footnote-ref1"></a></sup>. 脚注 2 链接<sup class="footnote-ref"><a href="#footnote2">[2]</a><a class="footnote-anchor" id="footnote-ref2"></a></sup>.</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>脚注 1 链接[^first].
脚注 2 链接[^second].
[^first]: 脚注 **可以包含特殊标记**
[^second]: 脚注文字。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="标记" tabindex="-1"><a class="header-anchor" href="#标记" aria-hidden="true">#</a> 标记</h2><p>VuePress Theme Hope <mark>非常</mark> 强大!</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>VuePress Theme Hope ==非常== 强大!
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="任务列表" tabindex="-1"><a class="header-anchor" href="#任务列表" aria-hidden="true">#</a> 任务列表</h2><ul class="task-list-container"><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" id="task-item-0" disabled="disabled"><label class="task-list-item-label" for="task-item-0"> Plan A</label></li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" id="task-item-1" checked="checked" disabled="disabled"><label class="task-list-item-label" for="task-item-1"> Plan B</label></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- [ ] Plan A
- [x] Plan B
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="更多" tabindex="-1"><a class="header-anchor" href="#更多" aria-hidden="true">#</a> 更多</h2><p><a href="https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/intro.html" target="_blank" rel="noopener noreferrer">更多使用方法<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><hr class="footnotes-sep"><section class="footnotes"><ol class="footnotes-list"><li id="footnote1" class="footnote-item"><p>脚注 <strong>可以包含特殊标记</strong> <a href="#footnote-ref1" class="footnote-backref">↩︎</a></p></li><li id="footnote2" class="footnote-item"><p>脚注文字。 <a href="#footnote-ref2" class="footnote-backref">↩︎</a></p></li></ol></section></div><!----><footer class="page-meta"><div class="meta-item edit-link"><a href="https://github.com/hjdbenny/blog/edit/main/web/markdown.md" rel="noopener noreferrer" target="_blank" aria-label="编辑此页" class="nav-link label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon edit-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="edit icon"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></svg><!--]-->编辑此页<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!----></a></div><!----><!----></footer><nav class="page-nav"><a href="/blog/web/" class="nav-link active prev" aria-label="前端笔记"><div class="hint"><span class="arrow left"></span>上一页</div><div class="link"><!---->前端笔记</div></a><a href="/blog/web/vue3.html" class="nav-link next" aria-label="vite+vue3+ts+pinia+vueuse"><div class="hint">下一页<span class="arrow right"></span></div><div class="link">vite+vue3+ts+pinia+vueuse<!----></div></a></nav><!----><!----><!--]--></main><!--]--><footer class="footer-wrapper"><div class="footer"></div><div class="copyright">Copyright © 2022 潇湘阁听雨</div></footer><!--]--></div><!--]--><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.0bf46e8a.js" defer></script>
  </body>
</html>
